<template>
    <div class="app-container">
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    plain
                    icon="el-icon-plus"
                    size="mini"
                    @click="handleAdd"
                >新增</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <el-table
            :data="tableData" style="width: 100%;" row-key="cate_id" :tree-props="{children: '_child'}">
            <el-table-column type="" prop="cate_id" label="ID"></el-table-column>
            <el-table-column prop="cate_title" label="分类名"></el-table-column>
            <el-table-column prop="cate_sort" label="排序"></el-table-column>
            <el-table-column prop="is_recommend" label="是否推荐">
                <template slot-scope="{row}">
                    <dict-tag :options="dict.type.sys_yes_no" :value="row.is_recommend"/>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="是否显示">
                <template slot-scope="{row}">
                    <dict-tag :options="dict.type.sys_yes_no" :value="row.status"/>
                </template>
            </el-table-column>
            <el-table-column prop="created_time" label="添加时间"/>
            <el-table-column prop="operation" label="操作">
                <template slot-scope="{row}">
                    <el-button @click="handleAddSub(row)" type="text" size="small" v-if="row.level != 2">子分类</el-button>
                    <el-button @click="handleEdit(row)" type="text" size="small">编辑</el-button>
                    <el-button @click="handleDel(row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 绑定设备 对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="700px"  >
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                <el-form-item label="父级分类" prop="pid">
                    <el-select v-model="form.pid" placeholder="请选择父级" autocomplete="off">
                        <el-option
                            key="0"
                            :checked="0 == form.pid"
                            label="默认顶级"
                            value="0"
                        />
                        <el-option
                            v-for="item in cateSelectList"
                            :key="item.cate_id"
                            :checked="item.cate_id == form.pid"
                            :label="item.cate_title"
                            :value="item.cate_id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="分类名称" prop="cate_title">
                    <el-input v-model="form.cate_title" placeholder="请输入水机名称"/>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input v-model="form.sort" style="width: 500px" type="number"></el-input>
                </el-form-item>
                <el-form-item label="是否推荐" prop="is_recommend">
                    <el-radio-group v-model="form.is_recommend">
                        <el-radio
                            v-for="dict in dict.type.sys_yes_no"
                            :key="dict.value"
                            :label="dict.value"
                        >{{dict.label}}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否显示" prop="status">
                    <el-radio-group v-model="form.status">
                        <el-radio
                            v-for="dict in dict.type.sys_yes_no"
                            :key="dict.value"
                            :label="dict.value"
                        >{{dict.label}}</el-radio>
                    </el-radio-group>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>


    </div>
</template>
<script>


import {getCateList,createCate,updateCate} from "@/api/grzq/mall/category";


import {removeFrom} from "@/utils"; //引入AMapLoader

export default {
    name: "Apparatus",
    dicts:['sys_normal_disable','sys_yes_no'],
    data() {
        return {
            // 遮罩层
            loading: true,
            // 显示搜索条件
            showSearch: true,
            // 表格数据
            tableData: [],
            cateSelectList: [],
            total: 0,
            // 弹出层标题
            title: "绑定设备",
            // 是否显示弹出层
            open: false,
            // 是否展开，默认全部展开
            isExpandAll: true,
            // 重新渲染表格状态
            refreshTable: true,
            // 查询参数
            queryParams: {
                search: undefined,
                status: undefined,
                page: 1,
                limit: 10,
            },
            form:{},
            rules:{
                cate_title: [
                    { required: true, message: '请输入分类名称'}
                ],
            },

        };
    },
    created() {
        this.getList();
    },
    methods: {
        /** 查询部门列表 */
        async getList() {
            let that = this;
            that.loading = true;
            const {data, status, msg} = await getCateList(this.queryParams);
            that.tableData = data;
            that.cateSelectList = data;
        },

        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                cate_id: undefined,
                cate_title: '',
                pid: 0,
                level: 1,
                desc: '',
                sort: 0,
                is_recommend: 'N',
                status: 'Y',
            };
            this.resetForm("form");
        },

        /** 搜索按钮操作 */
        handleQuery() {
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        /** 新增按钮操作 */
        handleAdd(row) {
            this.reset();
            this.open = true;
            this.title = "添加分类";
        },

        // 添加子分类
        handleAddSub(item) {
            this.open = true;
            this.title = "添加子分类";
            this.form.pid = item.cate_id
        },
        // 编辑子分类
        handleEdit(item) {
            this.open = true;
            this.title = "编辑分类";
            this.form = item
        },
        handleDel(item) {
            // this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
            //     confirmButtonText: '确定',
            //     cancelButtonText: '取消',
            //     type: 'warning'
            // }).then(async () => {
            //     let res = await request.get(this.baseIndex + 'goodsCate/del', {id: item.id})
            //     if (res.code == 0) {
            //         this.$message.success(res.msg)
            //         this.getList()
            //     } else {
            //         this.$message.error(res.msg)
            //     }
            // }).catch(() => {});
        },
        submitForm: function() {
            // 绑定设备信息
            this.$refs['form'].validate(valid => {
                if (valid) {
                    if (this.form.cate_id != undefined) {

                        updateCate(this.form).then(response => {
                            this.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        })
                    } else {
                        createCate(this.form).then(response => {
                            this.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        })

                    }
                }
            })
        },

    }
};
</script>
